import React from 'react';
// import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Listen from '@/pages/Listen';
import Found from '@/pages/Found';
import Account from '@/pages/Account';
// import Home from '@/pages/Home';
import Icon from '@/assets/iconfont/index';
import {RootStackNavigation, RootStackParamList} from '.';
import {
  getFocusedRouteNameFromRoute,
  RouteProp,
  TabNavigationState,
} from '@react-navigation/native';
import {useEffect} from 'react';
// import {Route} from 'react-native';
import HomeTabs from './HomeTabs';
import Play from './../pages/Views/Play';

export type BottomTabParmaList = {
  HomeTabs: undefined;
  Listen: undefined;
  Play: undefined;
  Found: undefined;
  Account: undefined;
};
interface IProps {
  navigation: RootStackNavigation;
  route: RouteProp<RootStackParamList, 'BottomTabs'> & {
    state?: TabNavigationState<{}>;
  };
}

function getHeaderTitle(route: RouteProp<RootStackParamList, 'BottomTabs'>) {
  // const routeName = route?.state?.routes[route.state.index].name || 'Home';
  const routeName = getFocusedRouteNameFromRoute(route) || 'HomeTabs';
  switch (routeName) {
    case 'HomeTabs':
      return '首页';
    case 'Listen':
      return '我听';
    case 'Found':
      return '发现';
    case 'Account':
      return '账户';
    default:
      return '首页';
  }
}

const Tab = createBottomTabNavigator<BottomTabParmaList>();
const BottomTabs = (props: IProps) => {
  useEffect(() => {
    const {navigation, route} = props;
    if (getHeaderTitle(route) === '首页') {
      navigation.setOptions({
        headerTitle: '', //getHeaderTitle(route) 修改头部标题
        headerTransparent: true, // 顶部标框隐藏
      });
    } else {
      navigation.setOptions({
        headerTitle: getHeaderTitle(route), //getHeaderTitle(route)
        headerTransparent: false,
      });
    }
  }, [props]);

  return (
    // <NavigationContainer>
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#f86442', //改变标签选中时字体颜色
      }}>
      <Tab.Screen
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({color, size}) => (
            <Icon name="icon-shouye" size={size} color={color} />
          ),
        }} //改变底部导航标题
        name="HomeTabs"
        component={HomeTabs}
      />
      <Tab.Screen
        options={{
          tabBarLabel: '我听',
          tabBarIcon: ({color, size}) => (
            <Icon name="icon-shoucang" size={size} color={color} />
          ),
        }}
        name="Listen"
        component={Listen}
      />
      <Tab.Screen
        name="Play"
        component={Play}
        options={({navigation}) => {
          return {
            tabBarButton: () => {
              return <Play onPress={() => navigation.navigate('Detail')} />;
            },
          };
        }}
      />
      <Tab.Screen
        options={{
          tabBarLabel: '发现',
          tabBarIcon: ({color, size}) => (
            <Icon name="icon-faxian" size={size} color={color} />
          ),
        }}
        name="Found"
        component={Found}
      />
      <Tab.Screen
        options={{
          tabBarLabel: '账户',
          tabBarIcon: ({color, size}) => (
            <Icon name="icon-user" size={size} color={color} />
          ),
        }}
        name="Account"
        component={Account}
      />
    </Tab.Navigator>
    // </NavigationContainer>
  );
};
export default BottomTabs;
